<template>
  <NuxtLayout>
    <el-breadcrumb class="my-crumb">
      <el-breadcrumb-item v-for="(item, index) in crumbData" :key="index">
        <a :href="item.href">{{ item.title }}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="detail">
      <h2 class="detail_title">{{ infoData.title }}</h2>
      <div class="detail_subtitle">
        发布人：{{
          infoData.author
        }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发布时间：{{
          infoData.publishedTime
        }}
      </div>
      <div class="detail_content" v-html="infoData.content"></div>
    </div>
  </NuxtLayout>
</template>

<script setup>
import { getInformation } from "~/server/api";
import { useCountStore } from "~/store/counter.js";
useCountStore().$patch({
  indexActive: 2,
});
const crumbData = ref([
  { title: '首页', href: '/' },
  { title: '新闻资讯', href: '/news' },
])
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_新闻详情",
  keywords: "技考邦,新闻详情",
  description: "技考邦，新闻详情。",
  ogTitle: "技考邦_新闻详情",
  ogDescription: "技考邦，新闻详情。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
// 详情
const infoData = ref({});
let { data: infoRes } = await useAsyncData("getInformation", () =>
  useServerRequest(getInformation, {
    method: "get",
    params: { id: useRoute().params.id },
  })
);
if (infoRes.value && infoRes.value.errno === 0) {
  infoData.value = infoRes.value.result;
  crumbData.value.push({ title: infoData.value.title, href: 'javascript:;' })
  // 修改TDK
  useSeoMeta({
    title: infoData.value.title,
    keywords: `技考邦,新闻资讯,${infoData.value.title}`,
    description: infoData.value.brief,
    ogTitle: infoData.value.title,
    ogDescription: infoData.value.brief,
  });
}
</script>

<style lang="less">
.detail_content {
  img {
    max-width: 100% !important;
  }
}
</style>
<style lang="less" scoped>
.detail {
  width: 1200px;
  margin: 20px auto;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #eaeae6;
  padding: 30px;

  &_title {
    padding-top: 49px;
    text-align: center;
    font-weight: bold;
    font-size: 28px;
    color: #333333;
  }

  &_subtitle {
    margin-top: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666666;
  }

  &_content {
    margin-top: 29px;
    border-top: 1px solid #eaeaea;
    padding: 30px 0;
  }
}
</style>
